<template>
  <div class="content">
    <ListView :data="Singer_Data" ></ListView>
  </div>
</template>

<script type="es6">
  import {getSingers} from 'api/singer.js'
  import Singer from 'common/js/Singer.js'
  import ListView from 'components/listview/listview'

  export default {
    created(){
      this._getSingers();

    },
    components:{
      ListView
    },
    methods: {
      _getSingers(){
        getSingers().then((res)=> {
          //console.log(res.data);
          let list = res.data.list;
          let rank = {
            hot: {
              title: this.HOT_SINGER,
              items: []
            }
          };
          list.forEach((value, index)=> {
            if (index < this.hotSinger_length) {
              rank.hot.items.push(new Singer(value.Fsinger_name, value.Fsinger_mid));
            }

            const key = value.Findex;
            if (!rank[key]) {
              rank[key] = {
                title: key,
                items: []
              };
            }
            rank[key].items.push(new Singer(value.Fsinger_name, value.Fsinger_mid));
          })
          // console.log(hotSingers);
          //console.log(rank);
          /* rank.forEach((value,key)=>{
           console.log(key);
           })*/

          let hot = [];
          let ret = [];
          for (let key in rank) {
            let val = rank[key];

            if (val.title === this.HOT_SINGER) {
              hot.push(val);
            } else if (val.title.match(/[a-zA-Z]/)) {
              ret.push(val);
            }
          }

          var rank_list = ret.sort((a, b)=> {
            return a.title.charCodeAt(0) - b.title.charCodeAt(0);

          })
          this.Singer_Data=hot.concat(rank_list);
          //console.log(this.Singer_Data);
          //console.log(rank_list);


        });
      }
    },
    data () {
      return {
        hotSinger_length: 10,
        HOT_SINGER: "热门",
        Singer_Data:[]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped lang="stylus" rel="stylesheet/stylus">
  @import "singer.styl";


</style>
